<template>
	<div class="main-page">
		<div class="page-header">
			<div class="page-header-title">
				辽宁省房地产市场监测系统 —— 土地供应
			</div>
			<div class="page-header-filtrate">
				<public-change-province-city :cityList="mapList" :currentCity="cityObj.code" @changeCity="changeCity" />
				<month-range-time-filtrate-public :monthRange="monthRange" class="page-header-filtrate-month-range"
					@changeFiltrateTime="changeMonthRange" />
			</div>
			<div class="bcak-home-btn"><router-link :to="{ name: 'propertyWatch' }">返回首页</router-link></div>
		</div>
		<div class="page-content">
			<div class="cont-item">
				<div class="cont-item-title">各城市土地出让面积数据汇总</div>
				<div class="cont-itme-cont">
					<barLinePublic v-if="cityLandSellAreaConutData.xAxisData.length > 0"
						:housingSupplyStatsData="cityLandSellAreaConutData" style="height: 100%;"
						@dialogData="dialogData"></barLinePublic>
				</div>
			</div>
			<div class="cont-item">
				<div class="cont-item-title">
					<div class="cont-item-title-left">土地出让面积</div>
					<div class="item-cont-tab">
						<div class="cont-tab-index" :class="cityLandSellParams.tab == 1 ? 'cont-index-active' : ''"
							@click="cityLandSellParamsTab(1)">当月</div>
						<div class="cont-tab-index" :class="cityLandSellParams.tab == 2 ? 'cont-index-active' : ''"
							@click="cityLandSellParamsTab(2)">累计</div>
					</div>
				</div>
				<div class="cont-itme-cont">
					<div class="item-cont-info">
						<div class="item-cont-info-left">累计:<span>80.7</span>万m²</div>
						<div class="item-cont-info-right">同比:<span>-0.6</span>%</div>
					</div>
					<barLinePublic v-if="cityLandSellData.xAxisData.length > 0"
						:housingSupplyStatsData="cityLandSellData" class="e-height" @dialogData="dialogData">
					</barLinePublic>
				</div>
			</div>
			<div class="cont-item">
				<div class="cont-item-title">
					<div class="cont-item-title-left">土地出让金</div>
					<div class="item-cont-tab">
						<div class="cont-tab-index" :class="cityLandSellMoneyParams.tab == 1 ? 'cont-index-active' : ''"
							@click="cityLandSellMoneyParamsTab(1)">当月</div>
						<div class="cont-tab-index" :class="cityLandSellMoneyParams.tab == 2 ? 'cont-index-active' : ''"
							@click="cityLandSellMoneyParamsTab(2)">累计</div>
					</div>
				</div>
				<div class="cont-itme-cont">
					<div class="item-cont-info">
						<div class="item-cont-info-left">累计:<span>{{ langSellMoneyRate.totalMoney }}</span>亿元</div>
						<div class="item-cont-info-right">同比:<span>{{ langSellMoneyRate.totalMoneyTb }}</span>%</div>
					</div>
					<barLinePublic v-if="cityLandSellMoneyData.xAxisData.length > 0"
						:housingSupplyStatsData="cityLandSellMoneyData" class="e-height" @dialogData="dialogData">
					</barLinePublic>
				</div>
			</div>
			<div class="cont-item">
				<div class="cont-item-title">各城市土地出让金数据汇总</div>
				<div class="cont-itme-cont">
					<barLinePublic v-if="cityLandSellMoneyConutData.xAxisData.length > 0"
						:housingSupplyStatsData="cityLandSellMoneyConutData" style="height: 100%;"
						@dialogData="dialogData"></barLinePublic>
				</div>
			</div>
			<div class="cont-item">
				<div class="cont-item-title">已挂牌土地情况</div>
				<div class="cont-itme-cont">
					<div class="item-cont-info">
						<div class="item-cont-info-left">宗数总量:<span>100</span></div>
						<div class="item-cont-info-right">宗地面积:<span>80.7</span>万m²</div>
					</div>
					<div class="table-com-box">
						<tableData :listTitle="listTitle1"></tableData>
					</div>
				</div>
			</div>
			<div class="cont-item">
				<div class="cont-item-title">各城市土地出让面积数据汇总</div>
				<div class="cont-itme-cont">
					<div class="item-cont-info">
						<div class="item-cont-info-left">宗数总量:<span>100</span></div>
						<div class="item-cont-info-right">已出让宗地面积:<span>80.7</span>万m²</div>
					</div>
					<div class="table-com-box">
						<tableData1 :listTitle="listTitle2"></tableData1>
					</div>
				</div>
			</div>
		</div>
		<magnify v-if="magnifyEchartData" :housingSupplyStatsData="magnifyEchartData" @closeDialog="closeDialog">
		</magnify>
	</div>
</template>


<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { useRoute } from "vue-router";
import publicChangeProvinceCity from "@/components/landSupply/publicChangeProvinceCity.vue";
import monthRangeTimeFiltratePublic from "@/components/landSupply/timeFiltratePublic.vue";
import { barLineParamsData } from "@/utils/chartsPbulic";
import barLinePublic from "@/components/landSupply/barLinePbulic.vue";
import magnify from "@/components/public/magnify.vue";
import tableData from "@/components/landSupply/tableData.vue";
import tableData1 from "@/components/landSupply/tableData1.vue";
const route = useRoute()
import {
	selectCityLandSellMoneyTotal,
	selectLandSellMoney
} from "@/api/landSupply";
import { relative } from "path";

const cityObj = ref<any>({
	name: '',
	code: null,
}) // 地图-城市code信息
const mapList = ref([
	{ name: '辽宁省', code: '210000' },
	{ name: '沈阳市', code: '210100' },
	{ name: '大连市', code: '210200' },
	{ name: '鞍山市', code: '210300' },
	{ name: '抚顺市', code: '210400' },
	{ name: '本溪市', code: '210500' },
	{ name: '丹东市', code: '210600' },
	{ name: '锦州市', code: '210700' },
	{ name: '营口市', code: '210800' },
	{ name: '阜新市', code: '210900' },
	{ name: '辽阳市', code: '211000' },
	{ name: '盘锦市', code: '211100' },
	{ name: '铁岭市', code: '211200' },
	{ name: '朝阳市', code: '211300' },
	{ name: '葫芦岛市', code: '211400' }
])
const monthRange = ref<any>([])
const startTime = ref<any>(null)
const endTime = ref<any>(null)
const magnifyEchartData = ref(null)//弹框
const langSellMoneyRate = reactive({//土地出让金同比
	totalMoney: 0,
	totalMoneyTb: 0
})

const cityLandSellAreaConutParams = ref({//各城市土地出让面积数据汇总请求参数
	code: cityObj.value.code
})
const cityLandSellParams = ref({//土地出让面积请求参数
	tab: 1,
})
const cityLandSellMoneyParams = ref({//土地出让金请求参数
	tab: 1,
})

const listTitle1 = ref(['地块编号', '地块名称', '土地面积（平方米', '土地用途', '容积率', '建筑密度', '绿地率'])//已挂牌土地情况列表名称
const listTitle2 = ref(['地块编号', '地块名称', '土地面积（平方米', '土地用途', '容积率', '建筑密度', '绿地率', '出让年限（年）', '成交价（万元）', '成交时间', '联系人'])//已出让土地情况列表名称

const cityLandSellAreaConutData = ref({//各城市土地出让面积数据汇总数据
	xAxisData: <any>[],
})
const cityLandSellData = ref({//土地出让面积数据数据
	xAxisData: <any>[],
})
const cityLandSellMoneyData = ref({//土地出让金数据
	xAxisData: <any>[],
})
const cityLandSellMoneyConutData = ref({//各城市土地出让金数据汇总数据
	xAxisData: <any>[],
})
const hangOutLand = ref({//已挂牌土地情况数据

})
const cityLandSellAreaData = ref({//已挂牌土地情况
	listTitle: <any>['地块编号', '地块名称', '土地面积（平方米）', '土地用途', '容积率', '建筑密度', '绿地率', '出让年限（年）', '成交价（万元）', '成交时间', '竞得人']
})
//各城市土地出让面积数据汇总
const cityLandSellAreaConut = async () => {
	// let { data } = await getYsDataStatistics({cityCode: cityObj.value.cityCode,queryType:queryTypeYs.value})
	let legendStyle = {
		show: true,
		icon: "circle",
		top: 12,
		itemWidth: 10,
		itemHeight: 10,
		itemGap: 50
	};
	let gridConfig = {
		left: 10,
		right: 10,
		bottom: 20,
		top: 70,
	};
	let paramsData = barLineParamsData(
		['住宅出让面积', '商业出让面积'],
		['沈阳市', '抚顺市', '沈阳市', '抚顺市', '沈阳市', '抚顺市', '沈阳市', '抚顺市'],
		[
			{
				name: "单位：万m²",
				type: "1",
			},
		],
		[
			{
				name: "bar",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
			{
				name: "bar",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
		],
		[
			[0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0],
		],
		[
			{
				a: "#02A7F0",
				b: "#02A7F0",
			}, {
				a: "#80EC98",
				b: "#80EC98",
			},

		],
		legendStyle,
		gridConfig
	);
	cityLandSellAreaConutData.value = paramsData;
}
//土地出让面积
const cityLandSell = async () => {
	let legendStyle = {
		show: true,
		icon: "circle",
		top: 12,
		itemWidth: 10,
		itemHeight: 10,
		itemGap: 50
	};
	let gridConfig = {
		left: 10,
		right: 10,
		bottom: 20,
		top: 70,
	};
	let paramsData = barLineParamsData(
		['住宅', '商业'],
		['沈阳市', '抚顺市', '沈阳市', '抚顺市', '沈阳市', '抚顺市', '沈阳市', '抚顺市', '沈阳市', '抚顺市'],
		[
			{
				name: "单位：万m²",
				type: "1",
			},
			{
				name: "单位：百分比",
				type: "2",
			},
		],
		[
			{
				name: "bar",
				type: '1',
				areaStyleType: "1",
				stack: "3",
			},
			{
				name: "bar",
				type: '1',
				areaStyleType: "1",
				stack: "3",
			},
			{
				name: "line",
				type: '2',
				areaStyleType: "1",
				stack: "2",
			},
		],
		[
			[0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0],
		],
		[
			{
				a: "#02A7F0",
				b: "#02A7F0",
			}, {
				a: "#80EC98",
				b: "#80EC98",
			},
			{
				a: "#80EC98",
				b: "#80EC98",
			},

		],
		legendStyle,
		gridConfig
	);
	cityLandSellData.value = paramsData;
}
//土地出让金
const cityLandSellMoney = async () => {
	let { data } = await selectLandSellMoney({ xzqhdm: cityObj.value.code, startTime: startTime.value, endTime: endTime.value, type: cityLandSellMoneyParams.value.tab })
	langSellMoneyRate.totalMoney = data.totalMoney
	langSellMoneyRate.totalMoneyTb = data.totalMoneyTb
	let legendStyle = {
		show: true,
		icon: "circle",
		top: 12,
		itemWidth: 10,
		itemHeight: 10,
		itemGap: 50
	};
	let gridConfig = {
		left: 10,
		right: 10,
		bottom: 20,
		top: 70,
	};
	let paramsData = barLineParamsData(
		[''],
		data.x,
		[
			{
				name: "单位：亿元",
				type: "1",
			},
			{
				name: "单位：百分比",
				type: "2",
			},
		],
		[
			{
				name: "bar",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
			{
				name: "line",
				type: '2',
				areaStyleType: "1",
				stack: "1",
			},
		],
		[
			data.y,
			data.y1,
		],
		[
			{
				a: "#02A7F0",
				b: "#02A7F0",
			}, {
				a: "#80EC98",
				b: "#80EC98",
			},

		],
		legendStyle,
		gridConfig
	);
	cityLandSellMoneyData.value = paramsData;
}
//各城市土地出让金数据汇总
const cityLandSellMoneyConut = async () => {
	let { data } = await selectCityLandSellMoneyTotal({ xzqhdm: cityObj.value.code, startTime: startTime.value, endTime: endTime.value })
	let legendStyle = {
		show: true,
		icon: "circle",
		top: 12,
		itemWidth: 10,
		itemHeight: 10,
		itemGap: 50
	};
	let gridConfig = {
		left: 10,
		right: 10,
		bottom: 20,
		top: 70,
	};
	let paramsData = barLineParamsData(
		['住宅', '商业'],
		data.x,
		[
			{
				name: "单位：亿元",
				type: "1",
			},
		],
		[
			{
				name: "bar",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
			{
				name: "bar",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
		],
		[
			data.y
		],
		[
			{
				a: "#02A7F0",
				b: "#02A7F0",
			}, {
				a: "#80EC98",
				b: "#80EC98",
			},

		],
		legendStyle,
		gridConfig
	);
	cityLandSellMoneyConutData.value = paramsData;
}

//土地出让面积选择tab
const cityLandSellParamsTab = (i: number) => {
	cityLandSellParams.value.tab = i
	cityLandSell()
}
//土地出让金选择tab
const cityLandSellMoneyParamsTab = (i: number) => {
	cityLandSellMoneyParams.value.tab = i
	cityLandSellMoney()
}
//时间
const changeMonthRange = (time: any) => {
	startTime.value = time[0]
	endTime.value = time[1]
	allFun()
}
//城市
const changeCity = (city: any) => {
	cityObj.value.code = city
	allFun()

}
// 打开弹框
const dialogData = (val: null) => {
	magnifyEchartData.value = val
}
//关闭弹框
const closeDialog = (val: any) => {
	magnifyEchartData.value = null
}
const allFun = () => {
	cityLandSellAreaConut()
	cityLandSell()
	cityLandSellMoney()
	cityLandSellMoneyConut()
}

onMounted(() => {
	startTime.value = route.query.startTime
	endTime.value = route.query.endTime
	monthRange.value = [startTime.value, endTime.value]
	cityObj.value.code = route.query.xzqhdm
	allFun()
})
</script>

<style scoped lang="less">
.main-page {
	width: 100vw;
	height: 100vh;
	background-image: url("@/assets/img/landSupply/pageBg.png");
	background-size: 100% 100%;
	color: #fff;
	overflow: hidden;

	.page-header {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		width: 100%;
		height: 100px;
		background-image: url("@/assets/img/landSupply/headBg.png");
		background-size: 100% 100%;

		&-title {
			position: absolute;
			left: 50px;
			font-size: 35px;
			color: #A6EDFF;
			text-shadow: 0px 0px 5px rgba(93, 222, 255, 0.64), 0px 2px 4px rgba(0, 0, 0, 0.5);
		}

		&-filtrate {
			position: relative;
			display: flex;
			align-items: center;
			top: 15px;
			left: 150px;

			.filtrate-city {
				width: 120px;

				/deep/ .el-select__wrapper {
					font-size: 15px;
				}

				margin-right: 30px;
			}

			.page-header-filtrate-month-range {

				/deep/ .el-range-input,
				/deep/ .el-range-separator {
					font-size: 15px;
					font-weight: lighter;
				}
			}
		}

		.bcak-home-btn {
			position: absolute;
			top: 52px;
			right: 50px;
			font-size: 20px;
			color: #7bebed;
			cursor: pointer;

			a {
				color: #7bebed;
			}
		}
	}

	.page-content {
		width: 100vw;
		height: calc(100vh - 100px);
		display: grid;
		grid-template-columns: repeat(3, 608px);
		grid-template-rows: repeat(2, 421px);
		gap: 60px 24px;
		padding-top: 30px;
		padding-left: 25px;
		padding-right: 25px;

		.cont-item {
			.cont-item-title {
				background-image: url("@/assets/img/landSupply/contTitle.png");
				background-size: 100% 100%;
				height: 30px;
				font-weight: bold;
				font-size: 18px;
				color: #FFFFFF;
				padding-left: 40px;
				display: flex;
				justify-content: space-between;
			}

			.item-cont-tab {
				display: flex;

				.cont-tab-index {
					font-weight: 600;
					font-size: 14px;
					color: #FFFFFF;
					width: 43px;
					height: 23px;
					background: rgba(33, 135, 244, 0.2);
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.cont-index-active {
					background: #2187F4;
					border: 1px solid #218BD0;
				}

				.cont-tab-index:hover {
					cursor: pointer;
				}
			}

			.cont-itme-cont {
				background-image: url("@/assets/img/landSupply/contCont.png");
				background-size: 100% 100%;
				height: 391px;
				position: relative;

				.item-cont-info {
					display: flex;
					justify-content: center;
					font-size: 18px;
					font-weight: 500;
					height: 35px;
					padding-top: 20px;

					.item-cont-info-left {
						margin-right: 50px;
					}

					.item-cont-info-right {
						margin-left: 50px;
					}
				}

				.e-height {
					height: calc(100% - 35px);
				}
			}
		}
	}
}

.table-com-box {
	height: 320px;
}

.e-height {
	height: 391px;
}

:deep(.el-tabs) {
	display: flex;
	align-items: center;

	.el-tabs__header {
		margin: 0;
	}

	.el-tabs__nav-wrap:after {
		height: 0;
	}

	.el-tabs__active-bar {
		height: 0;
	}

	.el-tabs__item {
		width: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0;
		font-size: 12px;
		height: 20px;
		cursor: pointer;
		color: white;
		background: rgb(9, 31, 63);
	}

	.el-tabs__item.is-active {
		background: #2187F4;
	}
}

:deep(.el-date-editor) {
	opacity: 1;
}

/deep/ .el-dialog {
	background-color: rgb(6, 37, 69);

	.el-dialog__title {
		font-size: 30px;
		color: white;
	}

	.el-dialog__close {
		color: white;
		font-size: 25px;
	}
}
</style>
